<!DOCTYPE html>
<html>
    <head>
        <title>考试内容</title>
        <meta charset="UTF-8">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
    .img1
    {
        cursor: pointer;
        position: absolute;
        top: 75px;
        left: 250px;
    }
    </style>
    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid"> 
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">我的作品介绍</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav nav nav-pills">
                        <li class="active"><a href="#home" data-toggle="tab" aria-expanded="true">自我介绍</a></li>
                        <li class=""><a href="#b1" data-toggle="tab" aria-expanded="false">杜甫</a></li>
                        <li class=""><a href="#b2" data-toggle="tab" aria-expanded="false">新闻列表</a></li>
                        <li class=""><a href="#b3" data-toggle="tab" aria-expanded="false">百度一下</a></li>
                        <li class=""><a href="#b4" data-toggle="tab" aria-expanded="false">课程表</a></li>
                        <li class=""><a href="#b5" data-toggle="tab" aria-expanded="false">QQ注册表</a></li>
                        <li class=""><a href="#b6" data-toggle="tab" aria-expanded="false">BILIBILI页面</a></li>
                        <li class=""><a href="#b7" data-toggle="tab" aria-expanded="false">轻松批</a></li>
                        <li class=""><a href="#b8" data-toggle="tab" aria-expanded="false">Bootstrap</a></li>
                    </ul> 
                </div>
            </div>
        </nav>
        <div class="tab-content container">
            <div class="tab-pane fade active in" id="home">
                <div>
                    <div class="img1"><img src="blackcat.jpg" width="120px" height="120px"></div>
                    <P><h1>樊云霄</h1></P>
                    <p>2020级软件技术2班&nbsp;&nbsp;&nbsp;&nbsp;学号：200320502032</p>
                    <p>兴趣爱好是读书、绘画、写小说、玩游戏，心情不好的时候会听音乐来解压。</p>
                </div>
            </div>
            <div class="tab-pane fade" id="b1">
                <p>杜甫练习内容</p>
                <a href="https://fan-yunxiao.gitee.io/program_study-2/杜甫/杜甫.html" target="_blank" class="btn btn-primary btn-lg active" type="submit" style="width: 120px;">进入</a>
            </div>
            <div class="tab-pane fade" id="b2">
                <p>新闻列表练习内容</p>
                <a href="https://fan-yunxiao.gitee.io/program_study-2/新闻列表/新闻列表.html" target="_blank" class="btn btn-primary btn-lg active" type="submit" style="width: 120px;">进入</a>
            </div>
            <div class="tab-pane fade" id="b3">
                <p>百度一下练习内容</p>
                <a href="https://fan-yunxiao.gitee.io/program_study-2/百度一下/百度一下.html" target="_blank" class="btn btn-primary btn-lg active" type="submit" style="width: 120px;">进入</a>
            </div>
            <div class="tab-pane fade" id="b4">
                <p>课程表练习内容</p>
                <a href="https://fan-yunxiao.gitee.io/program_study-2/课程表.html" target="_blank" class="btn btn-primary btn-lg active" type="submit" style="width: 120px;">进入</a>
            </div>
            <div class="tab-pane fade" id="b5">
                <p>QQ注册表练习内容</p>
                <a href="https://fan-yunxiao.gitee.io/program_study-2/QQ注册表单.html" target="_blank" class="btn btn-primary btn-lg active" type="submit" style="width: 120px;">进入</a>
            </div>
            <div class="tab-pane fade" id="b6">
                <p>BILIBILI页面练习内容</p>
                <a href="https://fan-yunxiao.gitee.io/program_study-2/BILIBILI页面/BILIBILI页面.html" target="_blank" class="btn btn-primary btn-lg active" type="submit" style="width: 120px;">进入</a>
            </div>
            <div class="tab-pane fade" id="b7">
                <p>轻松批练习内容</p>
                <a href="https://fan-yunxiao.gitee.io/program_study-2/轻松批/首页.html" target="_blank" class="btn btn-primary btn-lg active" type="submit" style="width: 120px;">进入</a>
            </div>
            <div class="tab-pane fade" id="b8">
                <p>Bootstrap练习内容</p>
                <a href="https://fan-yunxiao.gitee.io/program_study-2/Boostrap_web作业.html" target="_blank" class="btn btn-primary btn-lg active" type="submit" style="width: 120px;">进入</a>
            </div>
        </div>
    </body>
</html>